import React, { useState, useEffect } from 'react'
import '../styles/JSXJavaScript.css'

function JSXJavaScript() {
  const [count, setCount] = useState(0)
  const [user, setUser] = useState({
    name: '张三',
    age: 25,
    isOnline: true,
    skills: ['React', 'JavaScript', 'CSS']
  })

  const [items, setItems] = useState([
    { id: 1, name: '苹果', price: 5.99, inStock: true },
    { id: 2, name: '香蕉', price: 3.50, inStock: false },
    { id: 3, name: '橙子', price: 4.25, inStock: true }
  ])

  // 模拟数据变化
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1)
    }, 1000)
    return () => clearInterval(timer)
  }, [])

  // 计算属性
  const totalPrice = items.reduce((sum, item) => sum + item.price, 0)
  const availableItems = items.filter(item => item.inStock)
  const averagePrice = totalPrice / items.length

  // 格式化函数
  const formatPrice = (price) => `¥${price.toFixed(2)}`
  const formatDate = (date) => date.toLocaleDateString('zh-CN')
  const getStatusText = (isOnline) => isOnline ? '在线' : '离线'
  const getStatusColor = (isOnline) => isOnline ? '#4caf50' : '#f44336'

  return (
    <div className="jsx-javascript">
      <h1>🔧 JSX 中的 JavaScript 大括号用法</h1>
      
      <div className="javascript-sections">
        {/* 1. 基本表达式 */}
        <section className="js-section">
          <h2>📝 基本表达式</h2>
          <div className="example-grid">
            <div className="example-card">
              <h3>变量显示</h3>
              <div className="code-example">
                <pre><code>{`// 基本变量
const name = '张三'
const age = 25

// JSX 中使用
<h2>{name}</h2>
<p>年龄：{age}</p>`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <h2>{user.name}</h2>
                <p>年龄：{user.age}</p>
              </div>
            </div>

            <div className="example-card">
              <h3>数学运算</h3>
              <div className="code-example">
                <pre><code>{`// 数学运算
const a = 10
const b = 5

// JSX 中使用
<p>加法：{a + b}</p>
<p>乘法：{a * b}</p>
<p>除法：{a / b}</p>`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <p>加法：{10 + 5}</p>
                <p>乘法：{10 * 5}</p>
                <p>除法：{10 / 5}</p>
              </div>
            </div>
          </div>
        </section>

        {/* 2. 条件表达式 */}
        <section className="js-section">
          <h2>🎯 条件表达式</h2>
          <div className="example-grid">
            <div className="example-card">
              <h3>三元运算符</h3>
              <div className="code-example">
                <pre><code>{`// 三元运算符
{user.isOnline ? '在线' : '离线'}

// 复杂条件
{user.age >= 18 ? '成年人' : '未成年人'}

// 条件样式
<div style={{
  color: user.isOnline ? 'green' : 'red'
}}>`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <p>状态：{user.isOnline ? '在线' : '离线'}</p>
                <p>年龄组：{user.age >= 18 ? '成年人' : '未成年人'}</p>
                <div style={{ color: user.isOnline ? 'green' : 'red' }}>
                  动态颜色文本
                </div>
              </div>
            </div>

            <div className="example-card">
              <h3>逻辑运算符</h3>
              <div className="code-example">
                <pre><code>{`// 逻辑与
{user.isOnline && <span>🟢 在线</span>}

// 逻辑或
{user.name || '未知用户'}

// 复杂逻辑
{user.age > 20 && user.isOnline && '成年在线用户'}`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                {user.isOnline && <span>🟢 在线</span>}
                <p>用户名：{user.name || '未知用户'}</p>
                {user.age > 20 && user.isOnline && <p>成年在线用户</p>}
              </div>
            </div>
          </div>
        </section>

        {/* 3. 函数调用 */}
        <section className="js-section">
          <h2>🔧 函数调用</h2>
          <div className="example-grid">
            <div className="example-card">
              <h3>格式化函数</h3>
              <div className="code-example">
                <pre><code>{`// 格式化函数
const formatPrice = (price) => \`¥\${price.toFixed(2)}\`
const formatDate = (date) => date.toLocaleDateString('zh-CN')

// JSX 中使用
<p>价格：{formatPrice(5.99)}</p>
<p>日期：{formatDate(new Date())}</p>`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <p>价格：{formatPrice(5.99)}</p>
                <p>日期：{formatDate(new Date())}</p>
                <p>状态：{getStatusText(user.isOnline)}</p>
              </div>
            </div>

            <div className="example-card">
              <h3>计算函数</h3>
              <div className="code-example">
                <pre><code>{`// 计算函数
const totalPrice = items.reduce((sum, item) => sum + item.price, 0)
const averagePrice = totalPrice / items.length

// JSX 中使用
<p>总价：{formatPrice(totalPrice)}</p>
<p>平均价：{formatPrice(averagePrice)}</p>`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <p>总价：{formatPrice(totalPrice)}</p>
                <p>平均价：{formatPrice(averagePrice)}</p>
                <p>可用商品：{availableItems.length} 个</p>
              </div>
            </div>
          </div>
        </section>

        {/* 4. 数组方法 */}
        <section className="js-section">
          <h2>📋 数组方法</h2>
          <div className="example-grid">
            <div className="example-card">
              <h3>map 方法</h3>
              <div className="code-example">
                <pre><code>{`// map 方法
{user.skills.map((skill, index) => (
  <li key={index}>{skill}</li>
))}

// 带条件的 map
{items.map(item => (
  <div key={item.id} style={{
    color: item.inStock ? 'green' : 'red'
  }}>
    {item.name} - {formatPrice(item.price)}
  </div>
))}`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <ul>
                  {user.skills.map((skill, index) => (
                    <li key={index}>{skill}</li>
                  ))}
                </ul>
                <div className="items-list">
                  {items.map(item => (
                    <div key={item.id} style={{
                      color: item.inStock ? 'green' : 'red'
                    }}>
                      {item.name} - {formatPrice(item.price)}
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="example-card">
              <h3>filter 和 reduce</h3>
              <div className="code-example">
                <pre><code>{`// filter 方法
const availableItems = items.filter(item => item.inStock)

// reduce 方法
const totalPrice = items.reduce((sum, item) => sum + item.price, 0)

// JSX 中使用
<p>可用商品：{availableItems.length} 个</p>
<p>总价值：{formatPrice(totalPrice)}</p>`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <p>可用商品：{availableItems.length} 个</p>
                <p>总价值：{formatPrice(totalPrice)}</p>
                <div className="available-items">
                  <h5>可用商品：</h5>
                  {availableItems.map(item => (
                    <span key={item.id} className="item-tag">
                      {item.name}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 5. 对象和属性 */}
        <section className="js-section">
          <h2>📦 对象和属性</h2>
          <div className="example-grid">
            <div className="example-card">
              <h3>对象属性</h3>
              <div className="code-example">
                <pre><code>{`// 对象属性
const user = { name: '张三', age: 25 }

// JSX 中使用
<p>姓名：{user.name}</p>
<p>年龄：{user.age}</p>

// 动态属性名
const property = 'name'
<p>属性值：{user[property]}</p>`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <p>姓名：{user.name}</p>
                <p>年龄：{user.age}</p>
                <p>属性值：{user['name']}</p>
              </div>
            </div>

            <div className="example-card">
              <h3>动态样式对象</h3>
              <div className="code-example">
                <pre><code>{`// 动态样式
const style = {
  color: user.isOnline ? 'green' : 'red',
  fontSize: '18px',
  fontWeight: 'bold'
}

// JSX 中使用
<div style={style}>
  动态样式文本
</div>`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <div style={{
                  color: user.isOnline ? 'green' : 'red',
                  fontSize: '18px',
                  fontWeight: 'bold',
                  padding: '10px',
                  border: '1px solid currentColor',
                  borderRadius: '4px'
                }}>
                  动态样式文本
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 6. 复杂表达式 */}
        <section className="js-section">
          <h2>🧮 复杂表达式</h2>
          <div className="example-grid">
            <div className="example-card">
              <h3>嵌套表达式</h3>
              <div className="code-example">
                <pre><code>{`// 嵌套表达式
{items
  .filter(item => item.inStock)
  .map(item => item.price)
  .reduce((sum, price) => sum + price, 0)
  .toFixed(2)
}

// 条件计算
{user.age >= 18 
  ? \`\${user.name} 是成年人\`
  : \`\${user.name} 是未成年人\`
}`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <p>可用商品总价：¥{items
                  .filter(item => item.inStock)
                  .map(item => item.price)
                  .reduce((sum, price) => sum + price, 0)
                  .toFixed(2)
                }</p>
                <p>{user.age >= 18 
                  ? `${user.name} 是成年人`
                  : `${user.name} 是未成年人`
                }</p>
              </div>
            </div>

            <div className="example-card">
              <h3>模板字符串</h3>
              <div className="code-example">
                <pre><code>{`// 模板字符串
{\`用户 \${user.name} 的年龄是 \${user.age} 岁\`}

// 条件模板
{\`\${user.name} 当前状态：\${user.isOnline ? '在线' : '离线'}\`}

// 计算模板
{\`总共有 \${items.length} 个商品，平均价格 \${(totalPrice / items.length).toFixed(2)} 元\`}`}</code></pre>
              </div>
              <div className="result">
                <h4>实际效果：</h4>
                <p>{`用户 ${user.name} 的年龄是 ${user.age} 岁`}</p>
                <p>{`${user.name} 当前状态：${user.isOnline ? '在线' : '离线'}`}</p>
                <p>{`总共有 ${items.length} 个商品，平均价格 ${(totalPrice / items.length).toFixed(2)} 元`}</p>
              </div>
            </div>
          </div>
        </section>

        {/* 7. 实时数据演示 */}
        <section className="js-section">
          <h2>⏰ 实时数据演示</h2>
          <div className="realtime-demo">
            <div className="demo-card">
              <h3>计数器</h3>
              <div className="counter">
                <p>当前计数：{count}</p>
                <p>计数平方：{count * count}</p>
                <p>计数是否为偶数：{count % 2 === 0 ? '是' : '否'}</p>
                <p>计数二进制：{count.toString(2)}</p>
              </div>
            </div>

            <div className="demo-card">
              <h3>动态计算</h3>
              <div className="dynamic-calc">
                <p>当前时间：{new Date().toLocaleTimeString()}</p>
                <p>时间戳：{Date.now()}</p>
                <p>随机数：{Math.random().toFixed(4)}</p>
                <p>圆周率：{Math.PI.toFixed(6)}</p>
              </div>
            </div>
          </div>
        </section>

        {/* 8. 注意事项 */}
        <section className="js-section">
          <h2>⚠️ 注意事项</h2>
          <div className="notes-grid">
            <div className="note-card">
              <h3>大括号规则</h3>
              <ul>
                <li>只能包含表达式，不能包含语句</li>
                <li>不能直接使用 if/for 等控制语句</li>
                <li>可以使用三元运算符和逻辑运算符</li>
                <li>可以使用函数调用和计算</li>
              </ul>
            </div>

            <div className="note-card">
              <h3>常见错误</h3>
              <ul>
                <li>❌ <code>{`{if (condition) return <div>}</div>`}</code></li>
                <li>✅ <code>{`{condition && <div>}</div>`}</code></li>
                <li>❌ <code>{`{for (let i = 0; i < 5; i++) {}}`}</code></li>
                <li>✅ <code>{`{Array.from({length: 5}, (_, i) => <div key={i}>{i}</div>)}`}</code></li>
              </ul>
            </div>

            <div className="note-card">
              <h3>最佳实践</h3>
              <ul>
                <li>保持表达式简洁，复杂逻辑提取到函数</li>
                <li>使用有意义的变量名</li>
                <li>避免在 JSX 中进行复杂计算</li>
                <li>使用条件渲染而不是条件语句</li>
              </ul>
            </div>
          </div>
        </section>
      </div>
    </div>
  )
}

export default JSXJavaScript 